{% extends 'layouts/default/page.html' %}

{% load bootstrap4 %}
{% load i18n %}

{% block content %}

{% if user.is_authenticated %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video List</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .video-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #ccc;
        }
        .view-button {
            margin-left: 20px;
        }
        .video-list {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="my-4">Available Videos</h1>
        
        <ul class="video-list list-group">
            {% for video in videos %}
            <li class="list-group-item video-item">
                <span>{{ video.name }}</span>
                <button class="btn btn-primary view-button" data-id="{{ video.id }}">查看</button>
                <div id="video-{{ video.id }}" style="display: none;" class="mt-3">
                    <!-- 视频将在这里显示 -->
                </div>
            </li>
            {% endfor %}
        </ul>

        <!-- 分页控制 -->
        <nav aria-label="Page navigation" class="my-4">
            <ul class="pagination">
                {% if videos.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ videos.previous_page_number }}">Previous</a>
                    </li>
                {% endif %}

                {% for num in videos.paginator.page_range %}
                    <li class="page-item {% if videos.number == num %}active{% endif %}">
                        <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                    </li>
                {% endfor %}

                {% if videos.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ videos.next_page_number }}">Next</a>
                    </li>
                {% endif %}
            </ul>
        </nav>
    </div>

    <script>
        // 监听查看按钮的点击事件
        $('.view-button').on('click', function() {
            var videoId = $(this).data('id');
            var videoContainer = $('#video-' + videoId);
            console.log(videoId);

            // 发起 AJAX 请求，获取视频路径
            $.ajax({
                url: '/videos/' + videoId + '/',
                method: 'GET',
                success: function(data) {
                    // var videoHtml = '<video controls width="320"><source src="' + data.path + '" type="video/mp4">Your browser does not support the video tag.</video>';
                    // videoContainer.html(videoHtml).show();
                    // console.log(data.path);
                    // console.log(window.location.hostname);
                    // console.log(window.location.port)
                    const link_video = window.location.protocol + "//" + window.location.hostname + ':' + window.location.port + data.path
                    // console.log(link_video)
                    // window.location.href =  link_video; 
                    window.open(link_video, '_blank');
                },
                error: function() {
                    alert('Error loading video');
                }
            });
        });
    </script>
</body>
</html>

{% else %}
<div class="alert alert-warning">
    您还未登录。
</div>
{% endif %}

{% endblock %}
